<IvyTabs class="container user-profile-tabs" @selection={{tabSelected}} as |Tabs|>
  <Tabs.tablist class={{with-banner-offset "user-profile-tabs__tabslist"}} as |tablist|>
    {{#each @tabProperties as |tab|}}

      <User::Profile::PageContent::Renderer
        @isTablist={{true}}
        @entity={{@entity}}
        @tabProperties={{tab}}
        @tablistMenuProperties={{@tablistMenuProperties}}
        @isCurrentUser={{@isCurrentUser}}
      as |tablistRenderer|
      >

        {{#each tablistRenderer.tablist as |renderedTab|}}
          <tablist.tab
            class="user-profile-tabs__tab"
            @model={{renderedTab.id}}
            @on-select={{@changeTabSelection}}
          >
            {{renderedTab.title}}
            {{#if (get container.notifications renderedTab.id)}}
              <span
                class="notification-dot notification-dot--on-tab"
                aria-hidden="true"
              >
              </span>
            {{/if}}

          </tablist.tab>

        {{/each}}

      </User::Profile::PageContent::Renderer>

    {{/each}}
  </Tabs.tablist>

  <div class="container user-profile-content-body">
    {{#each @tabProperties as |tab|}}
      <User::Profile::PageContent::Renderer @tabProperties={{tab}} @tablistMenuProperties={{@tablistMenuProperties}} as |ContentRenderer|>
        {{#let ContentRenderer.tab as |renderedTab|}}

          <Tabs.tabpanel @model={{renderedTab.id}}>
            <Nacho::NachoTabCacher
              @lazyRender={{renderedTab.lazyRender}}
              @id={{renderedTab.id}}
              @currentTab={{tabSelected}}
            >
              {{component
                renderedTab.contentComponent
                entity=@entity
                configs=@configs
                isCurrentUser=@isCurrentUser
                params=(hash selectedTab=tabSelected)
              }}
            </Nacho::NachoTabCacher>
          </Tabs.tabpanel>

        {{/let}}
      </User::Profile::PageContent::Renderer>
    {{/each}}
  </div>
</IvyTabs>
